<template>
    <!-- components/search/city/index.wxml -->
    <view class="search_root" :style="'background-color: ' + backgroundColor + ';'">
        <view class="custom-class search_container">
            <view v-if="existDistrict" class="district" @tap="onSelectCity">
                <text class="district_text">{{ district }}</text>
                <van-icon class="search_l_m_8" class-prefix="iconfont" name="diqushaixuan" size="16rpx" color="#333333" />
                <text class="search_l_m_20" style="display: inline-block; background-color: #c1c1c1; width: 1rpx; height: 32rpx"></text>
            </view>
            <van-icon :class="existDistrict ? 'search_l_m_20' : 'search_l_m_0'" class-prefix="iconfont" name="sousuoyesousuo" size="32rpx" color="#333333" />

            <input
                v-model="valueClone"
                class="search_input search_l_m_8"
                :placeholder="placeholder"
                placeholder-class="search_input_placeholder"
                maxlength="20"
                :disabled="inputDisabled"
                @input="onInput"
                @tap="onTapInput"
                @confirm="onSearch"
            />
            <van-icon v-if="valueClone.length > 0" class="search_l_m_8" name="clear" size="32rpx" color="#666666" @tap.native="clear" />
        </view>
    </view>
</template>

<script>
// components/search/city/index.js
export default {
    data() {
        return {
            valueClone: ''
        };
    },
    externalClasses: ['custom-class'],
    props: {
        value: {
            type: String,
            default: ''
        },
        existDistrict: {
            type: Boolean,
            default: true
        },
        district: {
            type: String,
            default: '地区'
        },
        inputDisabled: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请输入搜索目的地、关键词'
        },
        backgroundColor: {
            type: String,
            default: 'white'
        }
    },
    methods: {
        /**
         * 点击地区选择按钮触发的事件
         */
        onSelectCity() {
            this.$emit('onSelectCity', {
                detail: {}
            });
        },
        /**
         * input输入内容触发的事件
         * @param {*} e
         */
        onInput(e) {
            this.setData({
                valueClone: e.detail.value
            });
        },
        /**
         * 点击输入框触发的事件
         * @param {} e
         */
        onTapInput(e) {
            this.$emit('onTapInput', {
                detail: this.value
            });
        },
        /**
         * 清空输入内容
         */
        clear() {
            this.setData({
                valueClone: ''
            });
        },
        /**
         * 进行搜索
         */
        onSearch() {
            if (this.value) {
                this.$emit('onSearch', {
                    detail: this.value
                });
            } else {
                uni.showToast({
                    icon: 'none',
                    title: '请输入搜索内容'
                });
            }
        }
    },
    created: function () {},
    watch: {
        value: {
            handler: function (newVal, oldVal) {
                this.valueClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
